<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>3. 表格</h2>
    <table border="1">
    <!--表格标记，边框线宽度为1-->
        <caption>学生信息表</caption>
        <!--表格标题--> 
        <thead>
        <!--行标记-->
            <tr>
                <th>学号</th> <th>姓名</th> <th>专业</th>
                <!--表格第一行的内容-->
            </tr>
        </thead>
        <tbody>
        <!--表主体标记，写入表主体内容-->
            <tr>
                <td>2021001</td> <td>小明</td> <td>计算机科学</td>
            </tr>
            <tr>
                <td>2021002</td> <td>小红</td> <td>软件工程</td>
            </tr>
        </tbody>
        <tfoot> 
        <!--表脚注-->
            <tr>
                <td colspan="3">注：此为示例数据</td>
                <!--该数据所在单元格跨3列--> 
            </tr>
        </tfoot>
    </table>
    <h2>4. 表单</h2>
    <form action="/submit-handler" method="POST">
    <!--设定表单的处理程序以及设定转送方式为post--> 
        <fieldset> 
        <!--表单控件分组-->
            <legend>用户登录</legend> 
            <!--表单开头标记，指定控件组的标题-->
            <label for="username">用户名:</label> 
            <!--input元素的定义标注-->
            <input type="text" id="username" name="username" required placeholder="请输入用户名"><br><br>
            <!--用户名的输入控件，类型为text-->
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required><br><br>
            <!--密码的输入控件，类型为password-->
            <label for="avatar">上传头像:</label>
            <input type="file" id="avatar" name="avatar" accept="image/*"><br><br>
            <!--头像文件的输入控件，类型为文件-->
            <label for="country">国家:</label>
            <select id="country" name="country">
                <option value="">--请选择--</option>
                <option value="china">中国</option>
                <option value="usa">美国</option>
                <!--国家的选择控件，选项为中国美国-->
            </select><br><br>
            <label>性别:</label>
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">女</label><br><br>
            <!--单选框控件，选项为男和女-->
            <label>兴趣（可多选）:</label>
            <input type="checkbox" id="coding" name="hobbies" value="coding">
            <label for="coding">编程</label>
            <input type="checkbox" id="music" name="hobbies" value="music">
            <label for="music">音乐</label>
            <input type="checkbox" id="sports" name="hobbies" value="sports">
            <label for="sports">运动</label><br><br>
            <!--复选框控件-->
            <label for="message">个人简介:</label><br>
            <textarea id="message" name="message" rows="4" cols="40" placeholder="介绍一下你自己..."></textarea><br><br>
            <!--信息填写控件-->
            <button type="submit">提交</button>
            <button type="reset">重置</button>
            <!--提交与重置按钮-->
            <button type="button"  onclick="alert('Hello!')">普通按钮</button> 
            <!--点击普通按钮会弹出hello-->
        </fieldset>
    </form>
</body>
</html>